import React, { PureComponent } from 'react';
import { Table, Card, Form, Input, Button, Pagination, message, Modal } from 'antd'
import { PageContainer } from '@ant-design/pro-layout'
import AddModal from './AddModal';
import EditModal from './EditModal';
import Authorized from '@/components/Authorized/Authorized'
import { getPolicyList, deletePolicy } from '@/services/notice'
import { fileurl} from '@/services/baseurl'
export default class Index extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            options: [],
            showAdd: false,
            showEdit: false,
            count: 1,
            data: [],
            doc: [],
            cover: [],
            docs: '',
            covers: '',
            sort: '0',
            name: '',
            id: '',
            searchName: '',
            currentPage: 0
        }
    }
    showAdd = () => {
        this.setState({
            showAdd: true
        })
    }
    hideAdd = () => {
        this.setState({
            showAdd: false
        })
    }
    showEdit = (row: any) => {
        this.setState({
            showEdit: true,
            doc: [
                {
                    uid: '-1',
                    name: row.doc,
                    status: 'done',
                    url: fileurl(row.is_jc) + row.doc,
                    thumbUrl: fileurl(row.is_jc) + row.doc,
                },
            ],
            cover: [
                {
                    uid: '-1',
                    name: row.cover,
                    status: 'done',
                    url: fileurl(row.is_jc) + row.cover,
                    thumbUrl: fileurl(row.is_jc) + row.cover,
                },
            ],
            docs: row.doc,
            covers: row.cover,
            sort: row.sort,
            name: row.title,
            id: row.id
        })
    }
    hideEdit = () => {
        this.setState({
            showEdit: false
        })
    }
    changeInputValue = (e: any, name: string) => {
        this.setState({
            [name]: e.target.value
        })
    }
    changeFile = (info: any, name: string) => {
        let fileList = [...info.fileList];
        fileList = fileList.slice(-1);
        fileList = fileList.map(file => {
            if (file.response) {
                file.url = file.response.url;
            }
            return file;
        });
        this.setState({ [name]: fileList });
    };

    getList = (page: string) => {
        const { searchName } = this.state;
        getPolicyList({ page, name: searchName }).then(res => {
            if (!res) return
            this.setState({
                count: res.count,
                data: res.data
            })
        })
    }
    changePage = (e: any) => {
        this.setState({
            currentPage: e-1
        })
        this.getList(String(e-1))
    }
    searchHandle = () => {
        this.setState({
            currentPage: 0
        },()=>{
            this.getList('0')
        })
       
    }
    deleteHandle = (id: any) => {
        Modal.confirm({
            title: '提示',
            content: '确认删除该政策法规？',
            onOk: () => {
                deletePolicy({
                    id
                }).then(res => {
                    if (res.static === 1) {
                        message.success('已删除');
                        this.getList("0");
                        this.setState({
                            currentPage: 0
                        })
                    } else {
                        message.error('删除失败')
                    }
                })
            }
        })

    }
    componentDidMount() {
        this.getList('0')
    }

    render() {
        const { showAdd, showEdit, count, data, doc, cover, sort, name, id, docs, covers,
            currentPage } = this.state;
        const columns = [
            {
                title: '封面',
                dataIndex: 'cover',
                render: (cover: string,row:any) => {
                    const str = fileurl(row.is_jc) + cover
                    return <img src={str} onClick={() => window.open(str)} style={{ height: 100, width: 100, objectFit: 'cover' }} alt=" " />
                }
            },
            {
                title: '政策法规',
                dataIndex: 'title'
            },
            {
                title: '编辑日期',
                dataIndex: 'created_at'
            },
            {
                title: '浏览次数',
                dataIndex: 'read'
            },
            {
                title: '操作',
                dataIndex: 'id',
                render: (id: any, row: any) => {
                    return <React.Fragment>
                        <Authorized authority={[402]}>
                            <a style={{ marginRight: 30 }} onClick={() => this.showEdit(row)}>编辑</a>
                        </Authorized>
                        <Authorized authority={[403]}>
                            <a onClick={() => this.deleteHandle(id)}>删除</a>
                        </Authorized>
                    </React.Fragment>
                }
            },
        ]
        return (
            <PageContainer>
                <Card>
                    <div style={{ overflow: 'hidden', marginBottom: 20 }}>
                        <Form layout="inline" style={{ float: 'right' }}>
                            <Form.Item>
                                <Input placeholder="请输入搜索名称" onChange={(e) => this.changeInputValue(e, 'searchName')}></Input>
                            </Form.Item>
                            <Form.Item><Button type="primary" onClick={this.searchHandle}>查询</Button></Form.Item>
                            <Authorized authority={[401]}>
                                <Form.Item><Button type="primary" danger onClick={this.showAdd}>添加</Button></Form.Item>
                            </Authorized>
                        </Form>
                    </div>
                    <Table columns={columns} pagination={false} dataSource={data} rowKey="id" />
                    <Pagination current={currentPage * 1+1} showSizeChanger={false} total={count} onChange={this.changePage} style={{ float: 'right', marginTop: 20 }}></Pagination>
                </Card>
                <AddModal
                    visible={showAdd} hideHandle={this.hideAdd} getList={this.getList}
                    currentPage={currentPage}
                />
                <EditModal
                    doc={doc} cover={cover} sort={sort} name={name} id={id}
                    visible={showEdit} hideHandle={this.hideEdit} docs={docs} covers={covers}
                    changeInputValue={this.changeInputValue}
                    changeFile={this.changeFile} getList={this.getList}
                    currentPage={currentPage}
                />
            </PageContainer>
        );
    }
}

